<!-- 备件管理-备件统计页面 -->
<template>
  <div class="equip-wrap-common">
    <div class="common-title">备品备件收发存汇总表</div>
    <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="6">
          <px-form-item label="备件名称/编码">
            <px-input
              v-model="queryParams.spareNameOrCode"
              placeholder="请输入备件名称/编码"
              maxlength="50"
              clearable
              @blur="queryParams.spareNameOrCode = $event.target.value.trim()"
              @keyup.enter="queryTable"
            >
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
        </px-col>
        <px-col :span="6">
          <px-form-item label="统计日期">
            <px-date-picker
              v-model="queryParams.taskDate"
              unlink-panels
              type="daterange"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
              @change="changeDate"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <div class="equip-table-btn">
      <px-button v-has="'ALL_EQUIP_SPAREPARTS_STAT_DOWNLOAD'" style="margin-right: 8px" type="primary" plain @click="templateDownload"
        >导出</px-button
      >
    </div>
    <px-table
      ref="tableRef"
      :data="tableData"
      class="equip-table"
      size="small"
      height="calc(100vh - 304px)"
      border
      show-summary
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
    >
      <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
    </px-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_SPAREPARTS_STAT"
});
import { getCurrentInstance, onMounted, reactive, toRefs } from "vue";
import dayjs from "dayjs";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import { sparePartCountReportNew } from "@/api/equip/spareParts";

const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "140", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartName", label: "名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "140", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "120", showOverflowTooltip: true },
    { prop: "initCount", label: "期初", minWidth: "120", showOverflowTooltip: true },
    { prop: "inCount", label: "入库", minWidth: "120", showOverflowTooltip: true },
    { prop: "outCount", label: "出库", minWidth: "120", showOverflowTooltip: true },
    { prop: "returnCount", label: "退库", minWidth: "120", showOverflowTooltip: true },
    { prop: "balanceCount", label: "结余数量", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  tableSum: {
    initTotalCount: "",
    inTotalCount: "",
    outTotalCount: "",
    returnTotalCount: "",
    balanceTotalCount: ""
  },
  tableRef: null,
  downloadParams: {
    spareNameOrCode: "",
    className: "",
    startDate: "",
    endDate: ""
  }
});
const { queryParams, tableColumns, tableData, tableSum, tableRef, downloadParams } = toRefs(state);

// 进入页面时触发
onMounted(() => {
  queryParams.value.taskDate = [dayjs().subtract(30, "day").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
  queryParams.value.startDate = dayjs().subtract(30, "day").format("YYYY-MM-DD") + " 00:00:00";
  queryParams.value.endDate = dayjs().format("YYYY-MM-DD") + " 23:59:59";
  queryTable();
});
// 合并行的单元格
const arraySpanMethod = () => {
  setTimeout(() => {
    if (tableRef.value.$el) {
      let current = tableRef.value.$el.querySelector(".px-table__footer-wrapper").querySelector(".px-table__footer");
      let cell = current.rows[0].cells;
      cell[0].colSpan = "4";
    }
  }, 50);
};
const getSummaries = () => {
  return [
    "合计",
    tableSum.value.initTotalCount,
    tableSum.value.inTotalCount,
    tableSum.value.outTotalCount,
    tableSum.value.returnTotalCount,
    tableSum.value.balanceTotalCount
  ];
};
// 获取开始日期及结束日期
const changeDate = val => {
  if (val && val.length > 0) {
    queryParams.value.startDate = val[0] + " 00:00:00";
    queryParams.value.endDate = val[1] + " 23:59:59";
  } else {
    queryParams.value.startDate = "";
    queryParams.value.endDate = "";
  }
};
// 查询备件列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await sparePartCountReportNew(params);
  tableData.value = data?.spareCountDTOList || [];
  tableSum.value.initTotalCount = data?.initTotalCount;
  tableSum.value.inTotalCount = data?.inTotalCount;
  tableSum.value.outTotalCount = data?.outTotalCount;
  tableSum.value.returnTotalCount = data?.returnTotalCount;
  tableSum.value.balanceTotalCount = data?.balanceTotalCount;
  downloadParams.value = {
    spareNameOrCode: queryParams.value.spareNameOrCode,
    className: queryParams.value.className,
    startDate: queryParams.value.startDate,
    endDate: queryParams.value.endDate
  };
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    taskDate: [dayjs().subtract(30, "day").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
    startDate: dayjs().subtract(30, "day").format("YYYY-MM-DD") + " 00:00:00",
    endDate: dayjs().format("YYYY-MM-DD") + " 23:59:59"
  };
  queryTable();
};
// 下载模版
const templateDownload = async () => {
  const params = downloadParams.value;
  proxy.download("post", "/digitaltwins/api/v1/sparePartNew/exportSparePartReport", params, "备品备件收发存汇总表.xlsx");
};

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  .common-title {
    width: 100%;
    height: 70px;
    font-size: 24px;
    font-weight: bold;
    line-height: 70px;
    text-align: center;
  }

  .custom-form-ui {
    padding-top: 0;
  }
}
</style>
